<div class="header">
    <div class="stats">
        <button type="button" id="planDragStart" class="btn btn-primary">开始编辑</button>
        <button type="button" id="planDragSave" class="btn btn-primary" style="display:none;">保存编辑</button>
        <button id="addPlanBtn" class="btn btn-primary" onclick="addPlan()"><i class="fa fa-plus"></i> 添加班次</button>
        <button id="resetPlanBtn" class="btn btn-danger">重置班次</button>
    </div>
    <h1 class="page-title">班次设置</h1>
    <ul class="breadcrumb">
        <li><a href="./">Home</a> </li>
        <li class="active">班次设置</li>
    </ul>
</div>
<div class="main-content" id="plan-content">
	<div class="page-header">
       <h4>班次排序 <span class="tip tooltip_icon" title="开始编辑后拖拽进行排序"></span></h4>
    </div>
    <div class="plan_order_config_container">
        <ul id="plan_order_list">
            <!-- 拼接 -->
        </ul>
    </div>
    <!-- save sort order here which can be retrieved on server on postback -->
    <input name="list1SortOrder" type="text" style="display:none;" />
    <br>
    <br>
	<div class="page-header">
    <h4>班次列表</h4>
	</div>
<!-- <div class="btn-toolbar list-toolbar">
    <button class="btn btn-primary"><i class="fa fa-plus"></i> 新增</button>
    <button class="btn btn-default">导入</button>
    <button class="btn btn-default">导出</button>
  <div class="btn-group">
  </div>
</div> -->
<div class="table_box">
	<table class="table table-hover table-bordered  table-condensed table-striped">
		<tbody>
			<tr>
				<th style="text-align:center;" width="4%">#</th>
				<th style="text-align:center;" width="10%">颜色</th>
				<th style="text-align:center;" width="15%">班次名称</th>
				<th style="text-align:center;" width="15%">定义类型</th>
				<th style="text-align:center;" width="15%">班次类型</th>
				<th style="text-align:center;" width="12%">起止时间</th>
				<th style="text-align:center;" width="12%">总时间(小时)</th>
				<th style="text-align:center;" width="12%">操作</th>
			</tr>
			<#list resultPage.getList() as x>
			<tr>
				<td style="text-align:center;">${(x.pid)!}</td>
				<td style="text-align:center;"><span href="javascript:void(0)" style="background-color:${(x.color)!}" class="form-control"></span></td>
				<td style="text-align:center;">${(x.planName)!}</td>
				<td style="text-align:center;"><#if x.defineType==1>系统定义<#else>自定义</#if></td>
				<td style="text-align:center;"><#if x.planType==1>工作<#elseif x.planType==2>非工作<#else>其他</#if></td>
				<td style="text-align:center;">${(x.periodTime)!}</td>
				<td style="text-align:center;">${(x.totalTime)!}</td>
				<td style="text-align:center;">
				<#if x.defineType==2>
					&nbsp;&nbsp;<span class="disabled"><a href="#delModal" data-toggle="modal" onclick="setPlanDelPid(${(x.pid)!},'${(x.planName)!}')">删除</a></span>
					&nbsp;&nbsp;<span class="disabled"><a href="#" onclick="setPlanModifiedPid(${(x.pid)!})">修改</a></span>
				<#else>
					<span class="disabled">锁定</span> 
				</#if>	
				</td>
			</tr>
			</#list>
		</tbody>
	</table>
	<#include "../common/_paginate.html" />
	<@paginate currentPage=resultPage.pageNumber totalPage=resultPage.totalPage actionUrl="plan" ui="WEB-INF/views/planset/plan.html" />
</div>
<div class="modal small fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">删除确认</h3>
        </div>
        <div class="modal-body">
            <p class="error-text"><i class="fa fa-warning modal-icon"></i>确定想要删除此记录吗?<br>这是不可恢复的操作.</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">取消</button>
            <button class="btn btn-danger" data-dismiss="modal" onclick="delPlan();">删除</button>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">
	var delPlanPid="";
	var delPlanName="";
	var modifiedPlanPid="";
	$(document).ready(function() {

		seajs.use(['app/planset/index','common/util'],function(index,Util){
			Util.disableBtn($('#addPlanBtn'));
			Util.disableBtn($('#resetPlanBtn'));
			index.getPlanOrder(function(){
				 Giscafer.ep.emit("planPageReady");
			});
			$("#planDragStart").click(function(event) {
				index.planDragStart();
			});
			$("#planDragSave").click(function(event) {
				index.planDragSave();
			});
			$("#resetPlanBtn").click(function(event) {
				index.resetPlan();
			});
			
		});
	});
	
	function delPlan(){
		gcGet('./plan/delete/'+delPlanPid,function(res){
			if(res==true){
				seajs.use(['app/planset/index'],function(index){
					index.removePlan(delPlanName);
				});
				//需要手动隐藏，不解。。
				$(".modal-backdrop").hide();
				loadUIAndRender('plan','WEB-INF/views/planset/plan.html');
			}
		});
		
	}
	function setPlanDelPid(pid,planName){
		delPlanPid=pid;
		delPlanName=planName;
	}
	function setPlanModifiedPid(pid){
		loadUIAndRender('plan/edit','WEB-INF/views/planset/edit.html&pid='+pid);
	}
	function addPlan(){
		loadUIAndRender('plan/add','WEB-INF/views/planset/add.html');
	}
</script>